<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<script src="vue.js"></script>
<form id="form1" name="form1" method="post">
  <p>
    <label for="textfield">用户名:</label>
    <!--avalue="obj1.用户名"-->
    <input name="textfield" type="text" id="textfield"    v-model="obj1.用户名">
  </p>
  <p>
    <label for="textfield2">备注:</label>
    <input type="text" name="textfield2" id="textfield2" v-bind:value="obj1.备注">
  </p>
  <p>
    <label for="select">Select:</label>
    <select name="select" id="select1" v-model="obj1.selectedProp">
      <option value="1">v1</option>
      <option value="2">v2</option>
      <option value="3">v3</option>
    
 
    </select>
  </p>
  <p>...........</p>
  <p>
    <input  name="submit" id="submit" value="提交" onClick="submt()" type="button">
  </p>
</form>
<script>
//建立vue与表格的绑定关系，同时设置初始值为空[]
//el就是form id
//obj1 是自定义的数据列表
var   VueObj1 =  new Vue({
          el: '#form1',
      	  data: {
			obj1:{}
          
          }
   });
   
   //获取数据，一般是从ajax从后端获取数据  
     var json_from_ajax= {用户名:"王一",备注:"管理员",selectedProp:3};
  	//将数据绑定到table控件 
    VueObj1.$data.obj1=json_from_ajax;
	
	function submt()
	{
	 console.log( VueObj1.$data.obj1 );
	}
</script>
</body>
</html>
